<template>
  <div>
    <!-- 搜索的布局 -->
    <el-select class="gml-drop-down-menu" v-model="formInline.status">
      <el-option
        v-for="item in tit"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></el-option>
    </el-select>
    <el-input
      v-model="input"
      class="gml-input"
      placeholder="请输入关键字"
    ></el-input>
    <el-button icon="el-icon-search" class="el-button" @click="status"
      >搜索</el-button
    >
    <el-button icon="el-icon-loading" class="el-button" @click="chong"
      >重置</el-button
    >
    <el-button class="gml-piliang" type="primary">批量导入</el-button>
    <!-- 表格渲染 -->
    <template>
      <el-table
        border
        class="gml-table"
        :data="reslist"
        stripe
        style="width: 100%"
      >
        <el-table-column prop="nickname" label="学员名称" width="280">
        </el-table-column>
        <el-table-column width="280" prop="mobile" label="手机号码">
        </el-table-column>
        <el-table-column prop="course_num" label="学习课程" width="280">
        </el-table-column>
        <el-table-column label="操作" width="280">
          <el-button type="text" @click="dialogTableVisible = true"
            >学习记录</el-button
          >
        </el-table-column>
      </el-table>
    </template>
    <!-- 分页 -->
    <!-- <el-pagination
      :current-page="pageNum"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="list.length"
      @current-change="change"
    >
    </el-pagination> -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="change"
      :current-page="pageNum"
      :page-sizes="[2, 3, 4, 5]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="list.length"
    >
    </el-pagination>
    <!-- 弹框 -->
    <el-dialog title="学习记录" :visible.sync="dialogTableVisible">
      <el-button type="primary">批量导入</el-button>
      <el-table
        border
        class="gml-table1"
        :data="listw"
        stripe
        style="width: 100%"
      >
        <el-table-column prop="nickname" label="学员名称" width="180">
        </el-table-column>
        <el-table-column width="180" prop="mobile" label="手机号码">
        </el-table-column>
        <el-table-column prop="course_num" label="学习课程" width="180">
        </el-table-column>
        <el-table-column label="操作" width="180">
          <el-button type="text" @click="dialogTableVisible = true"
            >学习记录</el-button
          >
        </el-table-column>
      </el-table>
      <el-button class="w" type="primary" @click="dialogTableVisible = false"
        >确 定</el-button
      >
      <el-button class="w" @click="dialogTableVisible = false">取 消</el-button>
    </el-dialog>
  </div>
</template>

<script>
import { user } from "../../../api";
export default {
  components: {},
  data() {
    return {
      dialogTableVisible: false,
      input: "",
      list: [],
      lists: [],
      listw: [],
      // 分页
      pageNum: 1,
      pageSize: 5,
      formInline: {
        status: 1
      },
      tit: [
        {
          label: "学员名称",
          value: 1
        },
        {
          label: "手机号码",
          value: 0
        }
      ]
    };
  },
  mounted() {
    user().then(res => {
      this.list = res.data.list;
      this.lists = res.data.list;
    });
  },
  methods: {
    // 搜索
    status() {
      if (this.formInline.status == 1) {
        var res = this.lists.filter(item => {
          return item.nickname.includes(this.input);
        });
      } else if (this.formInline.status == 0) {
        var res = this.lists.filter(item => {
          return item.mobile.includes(this.input);
        });
      }
      this.list = res;
    },
    change(val) {
      this.pageNum = val;
    },
    handleSizeChange(val) {
      this.pageSize = val;
    },
    // 重置
    chong() {
      this.list = this.lists;
      this.input = "";
    }
  },
  computed: {
    reslist() {
      return this.list.slice(
        this.pageSize * (this.pageNum - 1),
        this.pageSize * this.pageNum
      );
    }
  },
  watch: {}
};
</script>
<style lang="scss"></style>
<style scoped>
.gml-drop-down-menu {
  width: 110px;
  height: 38px;
  float: left;
  text-align: center;
  line-height: 38px;
}
.gml-input {
  float: left;
  width: 150px;
}
.el-button {
  float: left;
  margin-left: 20px;
}
.gml-piliang {
  float: left;
  margin-top: 60px;
  margin-left: -470px;
}
.gml-table {
  margin-top: 120px;
}

.gml-table1 {
  margin-top: 60px;
  margin-bottom: 30px;
}
.w {
  float: right;
  margin-top: -20px;
}
</style>
